<template>
  <div class="patnerBill">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item
              label="合作方名称"
              :label-col="{ span: 7}"
              :wrapper-col="{ span: 16, offset: 1}"
            >
              <a-input placeholder="请输入" v-decorator="['partnerName']" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="订单号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['order']" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['order']" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="8">
            <a-form-item label="支付号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['order']" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="支付时间" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-range-picker
                style="width: 100%"
                v-decorator="['rangeConfig']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="点位名称" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['order']" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="账单类型" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-select placeholder="请输入" v-decorator="['billType']">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="3">已付款</a-select-option>
                <a-select-option :value="4">已退款</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="结算状态" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-select placeholder="已结算" v-decorator="['payType']">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="2">已结算</a-select-option>
                <a-select-option :value="1">未结算</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="partnerSearch()" :style="{ marginRight: '1%' }">查询</a-button>
            <a-button type="dashed" @click="listExport()" :style="{ marginRight: '1%' }">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <!-- 中间模块 -->
    <a-card class="cell">
      <ul>
        <li class="oneCell">
          <p>实收总金额</p>
          <p>{{ this.sumActualProfitAmount }}</p>
        </li>
        <li>
          <p>订单总金额</p>
          <p>{{ this.sumOrderAmount}}</p>
        </li>
        <li>
          <p>分润总金额</p>
          <p>{{ this.sumProfitAmount }}</p>
        </li>
      </ul>
    </a-card>
    <!-- 表格模块 -->
    <a-card style="margin-top:2%">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :bordered="true"
        :rowKey="record => record.id"
      >
        <template slot="ordertypeNo" slot-scope="text,record">
          <span>{{ record.type==3?"已付款":record.type==4?"已退款":"" }}</span>
        </template>
        <template slot="payment" slot-scope="text,record">
          <span>{{ record.paymentMethod==2? "微信支付":""}}</span>
        </template>
        <template slot="orderNo" slot-scope="text,record">
          <span>{{ record.settlementStatus==1? "未结算":record.settlementStatus==2? "已结算":""}}</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const data = [
  {
    key: "1"
  }
];
const columns = [
  {
    title: "支付时间",
    dataIndex: "payTime",
    scopedSlots: { customRender: "payy" },
    align: "center"
  },
  {
    title: "订单号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderCode" },
    align: "center"
  },
  {
    title: "设备号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "deviceNo" },
    align: "center"
  },
  {
    title: "合作方名称",
    dataIndex: "partnerName",
    scopedSlots: { customRender: "partnerNo" },
    align: "center"
  },
  {
    title: "账单类型",
    dataIndex: "type",
    scopedSlots: { customRender: "ordertypeNo" },
    align: "center"
  },
  {
    title: "订单详情 ",
    dataIndex: "goodsNameList",
    scopedSlots: { customRender: "orderdetailNo" },
    align: "center"
  },
  {
    title: "结算状态",
    dataIndex: "settlementStatus",
    scopedSlots: { customRender: "orderNo" },
    align: "center"
  },
  {
    title: "订单金额",
    dataIndex: "paidAmount",
    scopedSlots: { customRender: "ordermoneyNo" },
    align: "center"
  },
  {
    title: "分润比例",
    dataIndex: "sharingDistributionRatio",
    scopedSlots: { customRender: "proportionNo" },
    align: "center"
  },
  {
    title: "分润金额",
    dataIndex: "sharingAmount",
    scopedSlots: { customRender: "orderNos" },
    align: "center"
  }
];

export default {
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {
        rules: [{ type: "array", required: true, message: "请选择时间!" }]
      },
      columns,
      data: [],
      sumActualProfitAmount: "",
      sumOrderAmount: "",
      sumProfitAmount: "",
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前
        current: 1, //当前页
        total: 50 //数据总条数
      }
    };
  },
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.handleReset();
      this.partnerSearch();
    },
    //查询合作方账单
    partnerSearch() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/partnerFinancial/findPartnerMyBillDetailsPageList",
          {
            loginToken: this.$store.state.loginToken,
            pageNum: this.pagination.current,
            pageSize: this.pagination.pageSize,
            devCode: values.deviceNumberP,
            orderCode: values.orderNumberP,
            partnerName: values.partnerName,
            payTn: values.payNumberP,
            posName: values.posName,
            status: values.settlementStatusP,
            type: values.billTypeP
          }
        )
        .then(response => {
          console.log(response.data.data);
          this.data = response.data.data.t.list;
          this.sumActualProfitAmount =
            response.data.data.t.sumActualProfitAmount;
          this.sumOrderAmount = response.data.data.t.sumOrderAmount;
          this.sumProfitAmount = response.data.data.t.sumProfitAmount;
          // this.sumSharingAmount = response.data.data.t.sumSharingAmount;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },
    //导出合作方账单
    listExport() {
      this.axios
        .post(
          this.baseUrl + "/partnerFinancial/exportPartnerMyBillDetailsList",
          {
            loginToken: this.$store.state.loginToken
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          // console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "合作方账单表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    }
  },
  created() {
    this.partnerSearch();
  }
};
</script>

<style>
.cell {
  margin-top: 2%;
}

.cell ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.cell ul li {
  width: 18%;
  text-align: center;
}
.cell ul li p:nth-of-type(1) {
  font-size: 1.2em;
}
.cell ul li p:nth-of-type(2) {
  font-size: 1.8em;
  margin: 0;
}
.oneCell {
  border-right: 2px solid rgb(217, 217, 217);
}
.oneCell p:nth-of-type(2) {
  color: red;
}
</style>
